<script setup lang="ts">
import { storeToRefs } from "pinia";
import type { Ref } from "vue";
import type { Categorie } from "@/types/detailTypes/detailTypes.ts";
import useDetailStore from "@/pinia/modules/detailStore/detailStore.ts";

const detailStore = useDetailStore();

const { categories, name }: { categories: Ref<Categorie[]>, name: Ref<string> } = storeToRefs(detailStore);


</script>

<template>
   <el-skeleton animated :count="4" :loading="!categories?.length">
      <template #template>
         <el-skeleton-item></el-skeleton-item>
      </template>
      <template #default>
         <Breadcrumb v-if="categories?.length">
            <BreadcrumbItem to="/">首页</BreadcrumbItem>
            <transition name="slide-fade" mode="out-in">
               <BreadcrumbItem to="/" :key="categories[1]?.name">{{ categories[1]?.name }}</BreadcrumbItem>
            </transition>
            <transition name="slide-fade" mode="out-in">
               <BreadcrumbItem to="/" :key="categories[0]?.name">{{ categories[0]?.name }}</BreadcrumbItem>
            </transition>
            <transition name="slide-fade" mode="out-in">
               <BreadcrumbItem :key="name">{{ name }}</BreadcrumbItem>
            </transition>
         </Breadcrumb>
      </template>
   </el-skeleton>

</template>

<style scoped lang="less">
.el-skeleton{
   width: 100%;
   height: 72px;
   display: flex;
   align-items: center;
   .el-skeleton__item{
      width: 90px;
      margin: 0 5px;
   }
}
</style>
